<!--  省市区地区选择框 - 属性面板 -->
<template>
  <div class="inputAttr">
    <div class="content">
      <div class="title">
        {{ attributeset.lab }}
      </div>
      <div v-if="attributeset.data" class="list">
        <div class="lab">字段标题：<span>最多30个字</span></div>
        <div>
          <input
            v-model="attributeset.data.title"
            type="text"
            max="10"
            placeholder="请输入"
          />
        </div>
        <div class="lab">占位文案：<span>最多30个字</span></div>
        <div>
          <input
            v-model="attributeset.data.placeholder"
            type="text"
            placeholder="请输入"
          />
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">显示标题</div>
          <div><t-switch v-model="attributeset.data.isShowTitle" /></div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">隐藏组件</div>
          <div><t-switch v-model="attributeset.data.isShow" /></div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">是否必填</div>
          <div><t-switch v-model="attributeset.data.isMust" /></div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">默认值</div>
          <div>
            <t-cascader
              v-model="attributeset.data.defaultValue"
              :options="option"
            />
          </div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">格式</div>
          <div>
            <t-radio-group
              v-model="addressTag"
              default-value="1"
              @change="changeType"
            >
              <t-radio value="1">省市</t-radio>
              <t-radio value="2">省市区</t-radio>
            </t-radio-group>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, watch, computed, onMounted } from 'vue'
import addressList from './addressList'

// 默认值与格式绑定
const addressTag = ref('1')
// 更改
const changeType = () => {
  attributeset.data.level = addressTag.value
  attributeset.data.defaultValue = ''
}
// 数据处理比较费资源 做个缓存
const cityList = ref()
const option = computed(() => {
  let data: any = addressList
  if (addressTag.value === '1') {
    data = cityList.value
  }
  return data
})

// 城市 城市数据处理 三级数据改为二级
const treeData = () => {
  cityList.value = addressList.map((obj) => {
    const newCity = { ...obj }
    newCity.children = newCity.children.map((n) => {
      const ctList = { ...n }
      ctList.children = []
      return ctList
    })
    return newCity
  })
}

onMounted(() => {
  treeData()
})

const props = defineProps({
  arrtData: Object
})

let attributeset = reactive({ ...props.arrtData })

// 接收父级的方法
const emit: Function = defineEmits(['changeAttrHandle'])
// 同步调整attributeset
watch(
  () => props.arrtData,
  (val) => {
    attributeset = { ...val }
  },
  { deep: true }
)
// 监听整个表单的输入
watch(
  () => attributeset,
  (val) => {
    emit('changeAttrHandle', val)
  },
  { deep: true }
)
</script>
<style src="../../index.less" scoped></style>
